<template>
    <van-grid :column-num="5" square class="grid">
        <van-grid-item v-for="value in arr" :key="value.text" :icon="value.url" :text="value.text" />
    </van-grid>

</template>

<script setup lang="ts">
import { ref } from "vue";

const arr = ref([
    {
        "text": "京东超市",
        "url": "https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png!q70.jpg"
    },
    {
        "text": "数码电器",
        "url": "https://m15.360buyimg.com/mobilecms/jfs/t1/178015/31/13828/6862/60ec0c04Ee2fd63ac/ccf74d805a059a44.png!q70.jpg"
    },
    {
        "text": "京东新百货",
        "url": "https://m15.360buyimg.com/mobilecms/jfs/t1/54043/33/19389/4660/62b049dbE3b9aef75/2fcd31afd5d702e4.png!q70.jpg"
    },
    {
        "text": "京东生鲜",
        "url": "https://m15.360buyimg.com/mobilecms/jfs/t1/177902/16/13776/5658/60ec0e71E801087f2/a0d5a68bf1461e6d.png!q70.jpg"
    },
    {
        "text": "京东到家",
        "url": "https://m15.360buyimg.com/mobilecms/jfs/t1/196472/7/12807/7127/60ec0ea3Efe11835b/37c65625d94cae75.png!q70.jpg"
    },
    {
        "text": "京东超市",
        "url": "https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png!q70.jpg"
    },
    {
        "text": "数码电器",
        "url": "https://m15.360buyimg.com/mobilecms/jfs/t1/178015/31/13828/6862/60ec0c04Ee2fd63ac/ccf74d805a059a44.png!q70.jpg"
    },
    {
        "text": "京东新百货",
        "url": "https://m15.360buyimg.com/mobilecms/jfs/t1/54043/33/19389/4660/62b049dbE3b9aef75/2fcd31afd5d702e4.png!q70.jpg"
    },
    {
        "text": "京东生鲜",
        "url": "https://m15.360buyimg.com/mobilecms/jfs/t1/177902/16/13776/5658/60ec0e71E801087f2/a0d5a68bf1461e6d.png!q70.jpg"
    },
    {
        "text": "京东到家",
        "url": "https://m15.360buyimg.com/mobilecms/jfs/t1/196472/7/12807/7127/60ec0ea3Efe11835b/37c65625d94cae75.png!q70.jpg"
    }
])
console.log(arr);


</script>

<style scoped>
.grid {
    margin-bottom: 5px;
}
</style>